<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>

<body>
    <div class="detail">
        <!-- 头部 -->
        <div class="header">
            <div class="back backColor">
                <a href="./index.html"> <span>&lt;</span> 返回</a>
            </div>
            <div class="title fontBig">
                详情
            </div>

        </div>
        <!-- 轮播图 -->
        <div class="casting">
            <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">

                </div>

            </div>

        </div>
        <div class="about">

        </div>
        <div class="det">

        </div>
        <!-- 底部 -->
        <div class="bot">
            <div class="help">
                <img src="./image/客服.png" alt="">
                <p>客服</p>
            </div>
            <div class="buy">
                <img src="./image/购物车 copy.png" alt="">
                <p>购物车</p>
            </div>
            <div class="btn">
                <button>加入购物车</button>
                <button>立即购买</button>
            </div>
        </div>

    </div>

</body>
<script src="./js/detail.js"></script>
<script src="./js/jquery-3.7.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/util.js"></script>

<script>
    
    let castingList = document.querySelector('.carousel-inner'); // 获取轮播图列表的容器
    let aboutlList = document.querySelector('.about'); // 获取详情列表的容器
    let detailList = document.querySelector('.det'); // 获取图片列表的容器
    myPromiseAjax({
        url: `http://39.105.198.203:3001/prod/det?tid=${location.search[5]}`,
    }).then(data => {

        castingList.innerHTML = ''; // 清空轮播图列表
        detailList.innerHTML = ''; // 清空图片列表
        console.log(data.data.imgarr);
        // 生成茶列表
        // 使用 data.data.list[i].tid 作为链接的 ID
        castingList.innerHTML = `<div class="carousel-item active">
                    <img src='${data.data.imgarr[0]}' class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src='${data.data.imgarr[1]}' class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src='${data.data.imgarr[2]}' class="d-block w-100" alt="...">
                  </div>`;
        aboutlList.innerHTML = `<div class="ioc">
                <img src="${data.data.fullSrc}" alt="">
            </div>
            <div class="text">
                <div class="teaName">${data.data.tname}</div>
                <div class="teaDesc">${data.data.tintro}</div>
                <div class="teaPrice">¥ <span class="fontBig">${data.data.price}</span> .00</div>
            </div>  `;

        detailList.innerHTML = `<img src=${data.data.fullSrc} alt=""></img>`


    }).catch(err => {
        console.log(err);
    });
</script>

</html>